<template>
	<view class="ranking-container">
		<view class="title">日满发小时排名</view>
		<view class="content">
			<uv-row customStyle="margin-bottom: 10px" class="cus-row">
				<uv-col span="1.5" textAlign="center">

					<view class="demo-layout bg-purple-light">排名</view>
					<view class="demo-col" v-for="(item,index) in rankList" :key="index">{{index + 1}}</view>
				</uv-col>

				<uv-col span="4.8" textAlign="center">
					<view class="demo-layout bg-purple">电站名称</view>
					<view class="demo-col" v-for="(item,index) in rankList" :key="index">{{item}}</view>
				</uv-col>
				<uv-col span="3" textAlign="center">
					<view class="demo-layout bg-purple">装机容量</view>
					<view class="demo-col" v-for="(item,index) in capacityList" :key="index">{{item}}</view>
				</uv-col>
				<uv-col span="3" textAlign="center">
					<view class="demo-layout bg-purple">满发小时</view>
					<view class="demo-col" v-for="(item,index) in hourList" :key="index">{{item}}</view>
				</uv-col>
			</uv-row>


		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		reqHourRanking
	} from "@/api/model/photovoltaic"
	const rankList = ref([])
	const capacityList = ref([])
	const hourList = ref([])
	const getData = async () => {
		let res = await reqHourRanking()
		let arr = res.data.data
		rankList.value = arr.map(item => item.powerstationName)
		capacityList.value = arr.map(item => item.installedCapacity)
		hourList.value = arr.map(item => item.fullPowerGeneration)
		// console.log("排名信息", rankList.value)
	}
	onMounted(() => {
		getData()
	})
</script>

<style lang="scss" scoped>
	.ranking-container {
		width: 100%;
		border-radius: 10px;
		background-color: #ffffff;
		margin: 20rpx 0;
		padding-bottom: 20rpx;

		.title {
			height: 76rpx;
			margin-left: 46rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 76rpx;
		}

		.content {
			.cus-row {
				.demo-layout {
					background-color: #f4f6f8;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					font-weight: 500;

				}

				.demo-col {
					height: 80rpx;
					line-height: 80rpx;
					border-bottom: 1px solid #eceef5;
				}
			}
		}
	}
</style>